<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>商品管理</title>
  <style>
    .main{
    	width:90%;
    	margin:0 auto;
    }
    .order{
    	width: 1065px;
    	margin: 0.5%;
    	overflow: hidden;
    }
    /* Add styles for the page */
    .container {
      width: 50%;
      margin: 0 auto;
      text-align: left;
    }

    .c_query-container {
      margin-top: 50px;
    }

    input[type="text"] {
      width: 40%;
      height: 30px;
      padding: 5px;
      border: 1px solid #fbc2eb;;
      font-size: 16px;
      border-radius: 5px;

    }

    button[type="submit"] {
      width: 20%;
      height: 40px;
      background-color: #fbc2eb;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 50px;
      font-weight: bold;
      
    }

    button[type="submit"]:hover {
      background-color: rgb(255, 128, 192);
    }

   table {
	border-collapse: collapse;
	width: 90%;
	text-align: center;
	position: absolute;
	left: 5%;
}

th, td {
	/**text-align: left;*/
	padding: 8px;
	border: 2px solid #fff;
}

th {
	background-color: #fbc2eb;
	color: rgb(0, 0, 0);
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}
/*编辑，删除指标**/
#c_modify, #c_delete {
	background-color:#fbc2eb;
	color: white;
	border: none;
	padding: 5px 10px;
	margin-right: 5px;
	cursor: pointer;
	text-decoration: none;
	font-size: 15px;
}

#c_add {
	width: 20%;
      height: 30px;
      background-color: #fbc2eb;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top:3px;
      font-weight:bold;
      float: right;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      font-size:14px;
      padding-top: 8px;
}
    
  </style>
  <script type="text/javascript" src="js/vue-2.6.10.js"></script>
  <script type="text/javascript" src="js/axios.js"></script>
</head>
<body>
<div class="order">
  <!-- Add a container for the page -->
  <div class="container">
    <!-- Add a form for the search box -->
    <div class="c_query-container">
    
      <form action="#">
        <input type="text" placeholder="请输入商品名称或编号" id="c_queryBox">
        <button type="submit">搜索</button>
        <a id="c_add" href="commod_add.html">添加商品</a>
      </form>
      
    </div>

    <!-- Add a container for the search results -->
    <div id="c_queryResults"></div>
  </div>

  
  	<table id="c_app">
		<thead>
			<tr style="border: 2px solid">
				<th>商品名称</th>
				<th>商品编号</th>
				<th>价格</th>
				<th>库存</th>
				<th>销量</th>
				<th>操作</th>
			</tr>
		</thead>
  	  <tbody>
  	   <tr v-for="c in commod">
  	  			<td>{{c.cName}}</td>
				<td>{{c.cNumber}}</td>
				<td>{{c.cPrice}}</td>
				<td>{{c.cInventory}}</td>
				<td>{{c.cSales}}</td>
				<td> 
					<a :href="'commod_modify.html?id='+c.cNumber" id="c_modify">修改</a>
					<a href="javascript:void(0);" v-on:click="cDelete(c.cNumber)" id="c_delete">删除</a>

				</td>
		</tr>
  	  
		
		</tbody>
  </table>
  <script type="text/javascript">
  	  let vue = new Vue({
  		  el:'#c_app',
  		  data:{
  			  commod:[]
  		  },
  		  created(){
  			  //url:表示异步请求地址
  			  axios.get('/OrderServert/emp.do').then(
  				function(res_obj){
  					vue.commod = res_obj.data.data.rows;
  					//console.log(res_obj.data.data.rows);
  					//console.log(vue.commod);
  				}	  
  			  ).catch(
						function(error_obj){
							alert("");
						}
				)
  		  },
  		 //删除
  	  	methods:{
  	  		cDelete: function(number){
  				console.log(number);
  				let url = '/OrderServert/emp.do/'+number;
  				console.log(url);
  				axios.delete(url).then(
  					function(res_obj){
  						//vue.users = res_obj.data;
  						window.location.href="commod.html";
  					}
  				).catch(
  					function(error_pbj){
  						alert("");
  					}
  				)
  			}
  		}
  	  });
  </script>
  </div>
</body>
</html>








    
